import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'
import vitePluginImp from 'vite-plugin-imp' // antd按需加载
import path from 'path'
import autoprefixer from 'autoprefixer'
import postcssFlexbugsFixes from 'postcss-flexbugs-fixes'

export default defineConfig({
  plugins: [
    react(),
    vitePluginImp({ // antd按需加载
      libList: [
        {
          libName: "antd",
          style: (name) => `antd/es/${name}/style`,
        },
      ],
    })
  ],
  css: {
    // css预处理器
    preprocessorOptions: {
      less: { // 引用过less文件，才能引入全局less文件，如果less文件都是module.less方式引入，下面的全局文件将不引入
        javascriptEnabled: true,
        additionalData: '@import "./src/assets/css/global.less";',
        modifyVars: {
          '@primary-color': '#4377FE',//设置antd主题色
        },
      },
    },
    postcss:{
      plugins: [
        // 前缀追加
        autoprefixer({
          overrideBrowserslist: [
            'Android 4.1',
            'iOS 7.1',
            'Chrome > 31',
            'ff > 31',
            'ie >= 8',
            '> 1%',
          ],
          grid: true,
        }),
        postcssFlexbugsFixes,
      ],
    }
  },
  resolve: {
    alias: {  // 配置别名
      '@': path.resolve(__dirname, "src"),
    }
  }
})
